import React, { Component } from 'react'
import './GoodsList.scss'
import SearchInput from '../../components/searchInput/SearchInput'
import { connect } from 'react-redux'

import { NavBar, Tabs, Toast } from 'antd-mobile';
import myaxios from '../../utils/myaxios'


class GoodsList extends Component {
    constructor(props) {
        super(props)
        this.goodsRef = React.createRef()
        this.pagesize = 10; // 默认返回的每条请求的数量
        this.pagenum = 1; //
    }
    state = {
        goods: [],
    }
    componentDidMount() {
        let { search } = this.props.location
        let params = search.split('?')[1] || ''
        let parmes = params.split('=')
        //判断地址栏上传递过来的信息
        if (parmes[0] === 'cid') {
            this.cid = parmes[1]
        } else if (parmes[0] === 'query') {
            this.query = parmes[1]
        }
        this.getProductList()
        // // 监听滚动事件
        this.goodsRef.current.parentElement.addEventListener(
            "scroll",
            this.handleScroll
        );
    }
    componentWillUnmount() {
        this.goodsRef.current.parentElement.removeEventListener("scroll",
            this.handleScroll)
    }
    handleScroll = () => {
        let top = this.goodsRef.current.parentElement
        // 获取可视窗口，移动的距离以及总的距离
        let scrollTop = top.scrollTop
        let clientHeight = top.clientHeight
        let scrollHeight = top.scrollHeight
        // 判断到达底部的距离
        if (scrollHeight - clientHeight - scrollTop <= 1) {
            console.log('触底啦')
            this.getProductList()
        }
    }
    getProductList = () => {
        //设置数据值

        let params = {}
        if (this.cid) {
            params['cid'] = this.cid
        }
        if (this.query) {
            params['query'] = this.query
        }
        //判断是否有total
         console.log(this.total)
        if (this.total) {
            params['pagenum'] = ++this.pagenum
        } else {
            params['pagenum'] = this.pagenum
        }
        //判断当前的页面是否大于总页面
        if (this.pagenum >= Math.ceil(this.total / this.pagesize)) {
            Toast.info('已经到底部啦', 1)
        } else {
            myaxios.get('goods/search', {
                params
            }).then(res => {
                console.log(res)
                this.total = res.total;
                this.pagenum = res.pagenum;
                this.setState({
                    goods: [...this.state.goods, ...res.goods],
                });
            }).catch(err => {
                console.log(err)
            })
        }

    }
    // 跳转商品详情页
    goXqClick = (e) => {
        let id = e.target.getAttribute('data-index')
        this.props.history.push('/detail/' + id)
    }
    render() {
        return (
            <div className='yg-goodslist'>
                {/* 顶部标题开始 */}
                <div className='yg-goodslist-title'>
                    <NavBar
                        className='searchContent-top'
                        icon={<i className='iconfont icon-fanhui1'></i>}
                        onLeftClick={() => window.history.go(-1)}
                    >商品列表</NavBar>
                </div>
                {/* 顶部标题结束 */}
                {/* 搜索部分开始 */}
                <div className='yg-goodsList-searchInput'>
                    <SearchInput />
                </div>
                {/* 搜索部分结束 */}
                {/* 分类开始 */}
                <div className='yg-goodslist-fl' >
                    <Tabs tabs={this.props.tabs}
                        initialPage={0}
                        tabBarUnderlineStyle={{ borderColor: "red" }}
                        tabBarActiveTextColor='red'
                    >
                        <div className='goodslist-list-synthesize' ref={this.goodsRef}>
                            {
                                this.state.goods.map((v, i) => {
                                    return (
                                        <div className='goods-item' key={v.goods_id} onClick={this.goXqClick}>
                                            <div className='goods-img'>
                                                <img src={v.goods_small_logo ? v.goods_small_logo : this.props.img} alt='' data-index={v.goods_id}></img>
                                            </div>
                                            <div className='goods-price'>
                                                <p data-index={v.goods_id}>{v.goods_name}</p>
                                                <span>￥{v.goods_price}</span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className='goodslist-list-sales'>
                            销量
                    </div>
                        <div className='goodslist-list-price'>
                            价格
                    </div>
                    </Tabs>
                </div>
                {/* 分类结束 */}
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        tabs: state.GoodsListReducer.tabs,
        img: state.GoodsListReducer.img
    }
}
export default connect(mapStateToProps, null)(GoodsList)